<template>
	<div class="sys-tabs-vue" :class="{'sys-tabs-oversize': tabsList.length > 15}">
		<div class="tabs-container" ref="scrollOuter">
			<div class="tabs-body">
				<DropdownMenu :datas="menus" @click="trigger" @show="show" trigger="contextMenu" :toggleIcon="false">
					<div v-for="(item, index) of tabsList" :key="index" :index="index" @click="handleClick(index)" class="tabs-item" :class="{'tabs-item-chosen': currentTab == index}" >
						<div class="tabs-item-background"></div>
						<div class="tabs-item-title">
							<span>{{item.name}}</span>
						</div>
						<span class="tabs-item-close h-icon-close" @click.stop="handleClose(index)" v-if="home.path!=item.path"></span>
					</div>
				</DropdownMenu>
			</div>
		</div>
	</div>
</template>

<script>
import Utils from 'hey-utils';
import { showTitle, routeEqual, isExsit } from './utils';
export default {
	name: 'TagsNav',
	props: {
		value: Object,
		home: Object
	},
	data() {
		return {
			nowIndex: 0,
			tabsList: [],
			currentTab : 0,
			menus: {
				closeSelf: '关闭标签页',
				closeOther: '关闭其他标签页',
				closeAll: '关闭所有标签页'
			}
		};
	},
	mounted() {
		this.tabsList.push(this.home)
	},
	methods: {
		addTab(tab){
			let add = true
			this.tabsList.forEach((v,k) =>{
				if(v.path == tab.path){
					add = false
					this.currentTab = k
				}
			})
			if(add){
				this.tabsList.push(tab)
				this.currentTab = this.tabsList.length-1
			}
		},
		show(event) {
			let parent = event.target.parentNode;
			this.nowIndex = parent.getAttribute('index') || parent.parentNode.getAttribute('index')
		},
		trigger(key, data, event) {
			if (key == 'closeAll') {
				this.tabsList = [this.home]
				this.currentTab = 0
				this.$router.push({path:this.home.path})
			} else if (this.nowIndex) {
				let selfTab = this.tabsList[this.nowIndex]
				if (key == 'closeOther') {
					this.tabsList = [this.home,selfTab]
					this.currentTab = 1
					this.$router.push({path:selfTab.path})
				} else if (key == 'closeSelf') {
					if(this.nowIndex > 0){
						this.handleClose(this.nowIndex)
					}
				}
			}
		},
		handleClick(index) {
			this.currentTab = index
			this.$router.push({path:this.tabsList[index].path})
		},
		handleClose(index) {
			if(index == this.currentTab){
				this.currentTab = index-1
				this.$router.push({path:this.tabsList[this.currentTab].path})
				this.tabsList.splice(index, 1)
			}else{
				if(this.currentTab > index){
					this.currentTab--
				}
				this.tabsList.splice(index, 1)
			}
		}
	}
};
</script>

<style lang="less">
.sys-tabs-vue {
	position: relative;
	height: 45px;
	background: #f3f6f8;
	user-select: none;
	z-index: 1;
	.close-con {
		position: absolute;
		right: 0;
		top: 0;
		height: 100%;
		width: 32px;
		background: #fff;
		text-align: center;
		z-index: 10;
	}
	.tabs-container {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		.tabs-body {
			height: 100%;
			box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.09);
			padding: 10px 0 0;
			.h-dropdownmenu {
				display: block;
			}
			.h-dropdowncustom-show-content {
				overflow: hidden;
				padding: 0 8px;
				white-space: nowrap;
				display: flex;
			}
		}
		.tabs-item {
			transition: 0.2s;
			line-height: 36px;
			height: 35px;
			padding: 0 15px 0 15px;
			position: relative;
			max-width: 120px;
			flex: 1;
			margin-left: -4px;
			margin-right: -4px;
			overflow: hidden;
			&:after {
				content: '';
				display: inline-block;
				position: absolute;
				right: 0;
				height: 20px;
				bottom: 6px;
				border-right: 1px solid #b5b5b5;
			}
			&-title {
				position: relative;
				z-index: 2;
				font-size: 13px;
				overflow: hidden;
				margin-right: 15px;
				.tabs-item-icon {
					position: relative;
					top: -1px;
				}
			}
			&-background {
				position: absolute;
				right: 3px;
				top: 0;
				left: 3px;
				bottom: 0;
				border-radius: 8px 8px 0 0;
			}
			&.tabs-item-chosen,
			&:hover {
				z-index: 1;
				&:after,
				&:before {
					content: '';
					bottom: 0;
					position: absolute;
					top: auto;
					border-right: none;
				}
				&:after {
					width: 0;
					height: 0;
					border-right: 10px solid transparent;
					right: 0px;
					z-index: 3;
				}
				&:before {
					width: 0;
					height: 0;
					border-left: 10px solid transparent;
					left: 0px;
					z-index: 3;
				}
			}
			@sysTabHoverColor: #EBECEF;
			&:hover {
				.tabs-item-background {
					background: @sysTabHoverColor;
				}
				&:after {
					border-bottom: 10px solid @sysTabHoverColor;
				}
				&:before {
					border-bottom: 10px solid @sysTabHoverColor;
				}
			}
			&.tabs-item-chosen {
				z-index: 2;

				.tabs-item-background {
					background: #fff;
				}
				&:after {
					border-bottom: 10px solid #fff;
				}
				&:before {
					border-bottom: 10px solid #fff;
				}
			}
			&-close {
				transition: 0.2s;
				font-size: 12px;
				position: absolute;
				right: 10px;
				top: 12px;
				color: #999;
				cursor: pointer;
				border-radius: 50%;
				padding: 4px;
				margin: -4px;
				transform: scale(0.8);
				&:hover {
					color: #333;
					background: #ddd;
				}
			}
		}
	}
	&.sys-tabs-oversize{
		.tabs-item:not(.tabs-item-chosen) {
			padding-right: 10px;
			.tabs-item-close {
				display: none;
			}
			.tabs-item-title {
				margin-right: 0;
			}
		}
	}
}
</style>